<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" charset="utf-8"></script>
      </head>
      <body>
        <div id="demo">
            <componet-a></componet-a>
            <componet-b></componet-a>
        </div>
      </body>
      <script type="x-template" id="a">
		<div>
			<a href="javascript:;">I'm componet-a, i'm in demo</a>
		</div>
	</script>
	<script type="x-template" id="b">
		<div>
            <!-- <a href="javascript:;">I'm componet-b, i'm in componet-a</a> -->
            <a href="javascript:;">I'm componet-b, i'm in demo</a>
		</div>
	</script>
      <script type="text/javascript">
        var CompontA = {
                template:"#a",
                data() {
                    return {
                    }
                },
                props: [ 'config' ]
        };
        var CompontB = {
            template:"#b",
                data() {
                    return {
                    }
                },
                props: [ 'config' ]
        };

        new Vue({
            el:"#demo",
            data:{
                message:1
            },
            methods:{

            },
            components : {
            'componet-a' : CompontA,
            'componet-b' : CompontB
            }
        });
      </script>
</html>